<template>
  <div
    :id="echartId"
    ref="gasEcharts"
    class="Echarts"
  />
</template>
<script>
import { modelCurve } from '@/api/safeGeneral/index'
import MixinEchart from '@/views/components/MixinEchart'
export default {
    name: '',
    mixins: [MixinEchart],
    props: {
        dataActive: {
            type: [Number, String],
            default: 1
        }
    },
    data() {
        return {
            echartId: 'gasEcharts',
            myChart: {}

        }
    },
    computed: {},
    watch: {
        dataActive: {
            handler() {
                this.getData()
            },
            immediate: true
        }
    },
    // created() {
    //     this.getData()
    // },
    methods: {

        async getData() {
            this.isLoading = true
            this.echartData = {}
            var params = ''
            if (this.dataActive === 2) {
                params = {
                    startTime: this.$moment().subtract(1, 'months').format('YYYY-MM-DD 00:00:00'),
                    endTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
                }
            }
            var res = await modelCurve(params)

            if (res) {
                this.isLoading = false
                this.echartData.data = res.values

                this.echartData.xName = res.days
            } else {
                this.echartData = {}
            }
            this.isLoading = false
            this.setOptions()
        },
        setOptions() {
            var option = {}
            option = {
                grid: {
                    // left: '2%',
                    // right: '5%',
                    left: '7%',
                    right: '7%',
                    bottom: '5%',
                    top: '30%',
                    containLabel: true
                },
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(37, 35, 32, 0.3)',
                    borderColor: 'rgba(235, 206, 142, 1)',
                    padding: [5, 10],
                    textStyle: {
                        // 提示框浮层的文本样式。
                        color: '#B4B4B4',

                        fontSize: this.fontSize
                    },
                    axisPointer: { type: 'cross' }
                },
                legend: {
                    data: ['安全态势变化趋势'],
                    itemWidth: this.fontSize * 1,
                    itemHeight: this.fontSize * 0.5,
                    orient: 'vertical',
                    right: '20',
                    top: '10',
                    textStyle: {
                        color: '#c3c3c3',
                        fontSize: this.fontSize
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: this.echartData.xName,
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: '#707070',
                            width: 1 // 这里是为了突出显示加上的
                        }
                    },
                    axisLabel: {
                        show: true,
                        color: this.axisColor,
                        formatter: (value, index) => {
                            return this.formatterTime(value)
                        },
                        textStyle: {
                            color: this.axisColor,
                            fontSize: this.fontSize
                        }
                    }
                }],
                yAxis: [{
                    name: '分数',
                    nameLocation: 'end',
                    minInterval: 1,
                    nameGap: 3,
                    nameTextStyle: {
                        align: 'left',
                        padding: [0, 0, this.fontSize, -this.fontSize],
                        fontSize: this.fontSize,
                        color: this.axisColor
                    },

                    axisTick: { show: false },

                    axisLine: {
                        onZero: false, show: false },
                    offset: 0,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            // 使用深浅的间隔色
                            color: ['rgba(112, 112, 112, 0.5)']
                        }
                    }
                }],
                series: [{
                    name: '安全态势变化趋势',
                    type: 'line',
                    // smooth: true,
                    symbol: 'circle',
                    symbolSize: this.fontSize * 0.3,
                    lineWidth: 2,
                    itemStyle: {
                        color: '#FF631F',
                        // shadowColor: '#FF631F',
                        // shadowBlur: 8, // 模糊系数
                        normal: {
                            color: '#FF631F',
                            areaStyle: {
                                type: 'default',
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF631F' },
                                    { offset: 0.5, color: '#803210' },
                                    { offset: 1, color: '#2B2B2B' }
                                ])
                            },

                            borderColor: '#FF631F', // 拐点边框颜色
                            borderWidth: 0.5 // 拐点边框大小
                        }
                    },
                    lineStyle: {
                        shadowColor: '#FF631F',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 12,
                        type: 'solid',
                        width: 2
                    },
                    data: this.echartData.data
                }

                ]
            }
            this.echartInstance.setOption(option)
            // })
        }
    }
}
</script>

<style lang='scss' scoped>
  .Echarts {
    width: 100%;
    height: 100%;
  }
</style>
